<template>
    <section>
      <div class="register">
        <span class="glyphicon glyphicon-menu-left pull-left" @click="get"></span>
        <span class="register-span">我的</span>
      </div>
      <div class="centre" @click="toAlter">
          <img v-if="!personTrue" :src="http + 'default.jpg'" class="img-circle">
        <img :src="http + personMsg.avatar" v-if="personTrue" class="img-circle">
          <span class="centre-span1"  v-if="!personTrue">登录/注册</span>
        <span class="centre-span1" v-if="personTrue">{{personMsg.username}}</span><br>
          <span class="glyphicon glyphicon-phone centre-span2"></span>
          <span class="centre-span3">暂无绑定手机号</span>
          <span class="glyphicon glyphicon-menu-right centre-span4 pull-right"></span>
      </div>
      <div class="row">
        <router-link class="col-xs-4" :to="{name:'Balances'}">
          <span style="color: orange">0.00</span>元
          <p>我的余额</p>
        </router-link>
        <router-link class="col-xs-4" :to="{name:'MyPreferential'}">
          <span style="color: red">3</span>个
          <p>我的优惠</p>
        </router-link>
        <router-link class="col-xs-4" :to="{name:'MyIntegral'}">
          <span style="color: green">0</span>分
          <p>我的积分</p>
        </router-link>
      </div>
      <div class="content">
        <div  class="col-xs-12 one">
          <router-link :to="{name: 'indent'}">
            <i class="iconfont">&#xe60c;</i>
            <p>我的订单</p>
            <span class="glyphicon glyphicon-menu-right content-span"></span>
            <hr class="content-hr1">
          </router-link>
        </div>
        <div class="col-xs-12">
          <router-link :to="{name: 'mall'}">
            <i class="iconfont">&#xe627;</i>
            <p>积分商城</p>
            <span class="glyphicon glyphicon-menu-right content-span"></span>
            <hr class="content-hr1">
          </router-link>
        </div>
        <div class="col-xs-12">
          <router-link :to="{name:'Membership'}">
            <i class="iconfont">&#xe61a;</i>
            <p>饿了么会员卡</p>
            <span class="glyphicon glyphicon-menu-right content-span"></span>
          </router-link>
        </div>
        <div class="col-xs-12 one">
          <router-link :to="{name:'service'}">
            <i class="iconfont">&#xe70b;</i>
            <p>服务中心</p>
            <span class="glyphicon glyphicon-menu-right content-span"></span>
            <hr class="content-hr1">
          </router-link>
        </div>
        <div class="col-xs-12">
          <router-link :to="{name: 'download'}">
            <i class="iconfont">&#xe6b3;</i>
            <p>下载饿了么APP</p>
            <span class="glyphicon glyphicon-menu-right content-span"></span>
          </router-link>
        </div>
      </div>
    </section>
</template>

<script>
    export default {
        name: "mineed",
      data(){
          return {
            personMsg:'',//获取用户信息
            http:'https://elm.cangdu.org/img/',
            personTrue:'',
          }
      },
      methods:{
          toAlter(){
            if (localStorage.getItem('personObj') == null){
              this.$router.push({name:'login'})
            } else {
              this.$router.push({name:'account'})
            }
          },
        get(){
            window.history.go(-1)
        },
      },
      created(){
          if (localStorage.getItem('personObj') == null) {
            this.personTrue = false;
          } else{
            this.personMsg = JSON.parse(localStorage.getItem('personObj'));
            this.personTrue = true;
            console.log(this.personMsg)
          }
      },
    }
</script>

<style scoped>
  .i{
    font-family:"iconfont" !important;
    font-size:1rem;
    font-style:normal;
    color: #F8BB86;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .center-popup{
    position: absolute;
    top: 30%;
    left: 0.19rem;
    text-align: center;
    border-radius: 0.1rem;
    width: 90%;
  }
  .center-popup p{
    font-size: 0.2rem;
    color: #000;
  }
  .center-popup button{
    width: 100%;
    font-size: 0.2rem;
    font-weight: 900;
  }
  .centre{
    width: 100%;
    height: 1rem;
    background-color: dodgerblue;
    position: relative;
  }
  .centre img{
    width: 0.5rem;
    margin: 0.25rem 0 0 0.1rem;
  }
  .centre-span1{
    margin-left:0.1rem;
    color: white;
    font-weight: bold;
  }
  .centre-span2{
    position: absolute;
    margin-top: 0.5rem;
    margin-left: 0.72rem;
    color: white;
  }
  .centre-span3{
    position: absolute;
    margin-top: -0.27rem;
    margin-left: 0.9rem;
    color: white;
  }
  .centre-span4{
    margin: -0.35rem 0.1rem 0 0;
    color: white;
  }
  .content-span{
    position: absolute;
    color: #C6C6C6;
    right: 0.1rem;
    top: 0.2rem;
  }
  .content-hr1{
    width: 89%;
    position: absolute;
    top: 0.29rem;
    right: 0;
  }
  .iconfont{
    font-family:"iconfont" !important;
    font-size:0.26rem;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    float:left;
  }
  .row{
    width: 100%;
    height:1.0rem;
  }
  .col-xs-4{
    text-align: center;
    line-height: 0.5rem;
    height: 0.5rem;
  }
  .content{
    width: 100%;
    height: 2.9rem;
    background-color: whitesmoke;
  }
  .content a{
    width: 100%;
  }
  .col-xs-12{
    background-color: white;
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .one{
    margin-top: 0.1rem;
  }
  .col-xs-4 span{
    font-size:0.2rem ;
  }
</style>
